<template>
	<view>

		<view class="cart-list">
			<block v-for="(item, index) in tmplist" :key="item.id">
				<view class="cart-item">
					<view class="checkbox " :class="item.checked!=undefined && item.checked?'checked':''" @tap="check('item',index)">
						<text class="cuIcon-check sm"  :class="item.checked!=undefined && item.checked?'checked':''"></text>
					</view>
					<view class="image-wrapper">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="item-right">
						<text class="title" style="padding-right: 20px;">{{item.name}}</text>
						<view class="attr">{{item.attrName}}</view>
						<view class="item-last">
							<text class="discount-price">¥{{item.price}}</text> 
							<text class="goods-price"></text> 
							<uni-number-box :min="1" :value="item.num" :isMin="item.num===1" :index="index" @eventChange="numberChange"
							 :data-index='item.index'></uni-number-box>
						</view>
					</view>

					<view class="remove cuIcon-roundclose" @tap="removeNet(item.id,index)"></view>
				</view>
			</block>
		</view>
		<!-- 底部菜单栏 -->
		<view class="action-section" v-if="tmplist.length>0">
			<view class="total-box">
				<text class="price-title">合计：</text>
				<text class="price-number">¥{{totalPrice}}</text>

			</view>
			<view class="confirm-btn" @click="createOrder">去结算</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/devm/cart/uni-number-box.vue'
	export default {
		name: 'cart-item',
		components: {
			uniNumberBox
		},
		props: {
			cartList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				totalPrice: 0,
				tmplist:[]
			}
		},
		created() {
			this.tmplist = this.cartList;
		},
		methods: {
			//数量
			numberChange(data) {
				console.log(data)
				this.tmplist[data.index].num = data.num;
				this.updateTotalPrice();
				this.changeNumNet(this.tmplist[data.index].id,this.tmplist[data.index].num);
			},
			//计算总价
			updateTotalPrice() {
				let list = this.tmplist;
				//console.log(list)
				if (list.length === 0) {
					this.totalPrice = 0;
					uni.hideTabBarRedDot({
						index:1
					})
					this.$global.data.cartNum = 0;
					return;
				}
				let totalPrice = 0;
				list.forEach(item => {
					if (item.checked!=undefined && item.checked === true) {
						totalPrice += item.price * item.num;
					} 
				})
				this.totalPrice = Number(totalPrice.toFixed(2));
			},


			//选中状态处理
			check(type, index) {
				if (type === 'item') {
					this.tmplist[index].checked = !this.tmplist[index].checked
				}
				this.updateTotalPrice();
			},
			createOrder() {
				this.$msg('生成订单中')
				var arr = []
				for(var k=0;k<this.tmplist.length;k++) {
					if(this.tmplist[k].checked) {
						arr.push(this.tmplist[k])
					}
				}
				uni.setStorage({
					key:'skuArr',
					data:arr
				})
				uni.navigateTo({
					url:'/pages/order/fillorder'
				})
			},
			changeNumNet(cartId,num) {
				var that = this;
				this.$get('mall/cart/changeNum', {cartId:cartId,num:num},'POST').then((res) => {
					if (res.data) {
						
					}
				})
			},
			removeNet(cartId,index) {
				var that = this;
				// console.log('index:'+index)
				this.$get('mall/cart/remove', {cartId:cartId},'POST').then((res) => {
					that.tmplist.splice(index,1);
					that.updateTotalPrice();
					// if(that.tmplist.length==0) {
						that.$emit('onRemoveCart',that.tmplist.length,index)
					// }
				})
			}
		},
		mounted() {
			this.updateTotalPrice();
		}

	}
</script>

<style lang="scss">
	.remove {
		position: absolute;
		right: 16px;
		top: 15px;
		margin-left: 10px;
		color: grey;
		font-size: 16px;
	}

	.checkbox {
		position: absolute;
		left: 15px;
		top: 12px;
		z-index: 999999999;
		z-index: 8;
		font-size: 16px;
		padding: 2.5px;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.cuIcon-check {
		color: #C5A16F;
	}

	.checkbox.checked,.cuIcon-check.checked {
		color: #FFFFFF !important;
		background: #C5A16F;
	}

	/* 购物车列表项 */
	.cart-item {
		display: flex;
		position: relative;
		align-content: center;
		align-items: center;
		padding: 30upx 40upx;

		.image-wrapper {
			width: 140upx;
			height: 140upx;
			flex-shrink: 0;
			position: relative;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
			}
		}


		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			/* position: relative; */
			padding-left: 30upx;

			.title {
				font-size: 30upx;
				color: black;
			}


			.attr {
				font-size: 24upx;
				color: gray;
				padding: 5px 0;
			}

			.item-last {
				display: flex;
				align-items: center;
				align-content: center;

				.discount-price {
					font-size: 30upx;
					color: #A5673F;
				}

				.goods-price {
					margin: 15upx;
					flex-grow: 1;
					font-size: 24upx;
					color: gray;
					text-decoration: line-through;
				}
			}
		}
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100upx;
		/* #endif */
		position: fixed;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;

		.total-box {
			display: flex;
			align-items: center;
			margin-left: 30upx;

			.price-title {
				font-size: 32upx;
				color: #1C232B;
			}

			.price-number {
				font-size: 32upx;
				color: #C5A16F;
			}


		}

		.confirm-btn {
			width: 250upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size: 32upx;
			background: #C5A16F;
			color: #FFFFFF;

		}
	}
</style>
